<template>
    <view :style="{ '--color': color, '--back-color': $common.hexToRgba(color, 0.1) }">
        <status-bar :title="title"></status-bar>
        <view class="Wrapper">
            <view class="List" v-for="(item, index) in pageData" :key="index">
                <store-product
                    class="store-product"
                    v-if="isStoreProduct(item)"
                    :product-id="item.product_id"
                    :appid="item.shop_appid"
                    :product-promotion-link="item.upTeamData.promotion_link"
                ></store-product>
                <view class="popCenter" v-else @click="Binding"></view>
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="Img"></image>
                <view class="box">
                    <view class="titleBox">
                        <text class="title ellipsis_2">{{ item.name }}</text>
                    </view>
                    <view class="Info">
                        <view class="price color_ff4 bold500">
                            <text class="size22 m-top6">￥</text>
                            <text class="size36">{{ item.price }}</text>
                        </view>
                    </view>
                    <view class="brokerage" @click.stop="ShareBtn(item)">
                        <view class="brokerageBox">预计赚￥{{ item.myData.income }}</view>
                        <view class="Share">分享</view>
                    </view>
                </view>
            </view>
        </view>

        <emptys v-if="!pageData.length"></emptys>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                classify_id: '',
                pageData: [],
                showModal: false,
                windowauth: '',
                user_status: 0, // 0未注册 1未完成注册 2未实名 3已注册但没绑定机构 4已注册已绑定机构
                openBusinessView: {
                    businessType: '',
                    queryString: ''
                },
                extraData: {
                    headSupplierAppid: '', // 需要填入您的机构appid
                    commissionType: 1, // 1代表机构自己分佣
                    commissionRatio: 0 // 机构自己分佣时设为0
                },
                title: ''
            };
        },
        onLoad(opt) {
            if (opt.classify_id) this.classify_id = opt.classify_id;
            this.getClassifyGoodsList();
        },
        onShow() {
            this.getUserBindInfo();
        },
        methods: {
            async getUserBindInfo() {
                const requestResult = await Api.getUserBindInfo();
                if (requestResult.windowauth) this.windowauth = requestResult.windowauth;
                this.user_status = requestResult.user_status;
                if (this.user_status == 4) return;
                const result = requestResult.data;
                this.openBusinessView = {
                    businessType: result.businessType,
                    queryString: result.queryString
                };
                this.extraData = {
                    headSupplierAppid: result.extraData.headSupplierAppid,
                    commissionType: result.extraData.commissionType,
                    commissionRatio: result.extraData.commissionRatio
                };
            },
            getClassifyGoodsList() {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/weChatStoreApi/getClassifyGoodsList',
                        data: {
                            classify_id: this.classify_id
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        if (res.title) this.title = res.title;
                        const result = res.data || [];
                        this.pageData = result;
                    });
            },
            async Binding(Item) {
                if (!this.vid) return (this.showModal = true);
                const myData = Item.myData;
                const upTeamData = Item.upTeamData;
                // if (Item.buy_verification == 0 || myData.sharer_appid) return this.$pop.toUserProfile(upTeamData.user_info.finder_id);
                const reuslt = await this.$Modals('您还未授权成为推客', '授权成为推客后才可购买');
                if (reuslt) this.Business();
            },

            isStoreProduct(Item) {
                const myData = Item.myData;
                if (Item.buy_verification == 0 || (Item.buy_verification == 1 && this.user_status == 4)) {
                    return true;
                } else {
                    return false;
                }
            },
            async ShareBtn(Item) {
                const myData = Item.myData;
                if (Item.share_verification == 1 && !myData.sharer_appid) {
                    const reuslt = await this.$Modals('您还未授权成为推客', '成为推客后分享商品可产生收益');
                    if (reuslt) this.Business();
                    return;
                } else {
                    this.toUrl(`weiShare?goods_id=${Item.goods_id}`);
                }
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            }
        },
        computed: {
            ...mapState(['color', 'vid'])
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
    }
</style>
<style lang="scss" scoped>
    .u-popup {
        width: 100%;
        padding: 30rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            color: #000;
            font-size: 36rpx;
            font-weight: 500;
        }
        .orderNum {
            width: 600rpx;
            height: 80rpx;
            border: 1px solid #f1f1f1;
            border-radius: 6rpx;
            margin-top: 50rpx;
            padding: 0 20rpx;
            font-size: 30rpx;
            color: #000;
        }
        .configBtn {
            width: 250rpx;
            height: 80rpx;
            background-color: var(--color);
            margin-top: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
            color: #fff;
            border-radius: 10rpx;
        }
    }
    .RigtFix {
        position: fixed;
        right: 10rpx;
        top: 50%;
        display: flex;
        flex-direction: column;
        .orderBor {
            width: 90rpx;
            height: 90rpx;
            background-color: var(--color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20rpx;
        }
    }

    .btn {
        width: 250rpx;
        height: 80rpx;
        background-color: var(--color);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 30rpx;
        margin: 20rpx auto;
    }
    .Wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 10rpx;
        justify-content: space-between;
        margin-top: 10rpx;
        .List {
            width: 360rpx;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            margin-top: 10rpx;
            border-radius: 10rpx 10rpx;
            position: relative;
            overflow: hidden;
            .store-product,
            .popCenter {
                width: 100%;
                height: 86%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #fff;
                z-index: 11;
                opacity: 0;
            }

            .Img {
                width: 100%;
                height: 350rpx;
                border-radius: 10rpx 10rpx 0 0;
            }
            .box {
                width: 100%;
                padding: 10rpx;
                display: flex;
                flex-direction: column;
                .titleBox {
                    width: 100%;
                    height: 90rpx;
                    .title {
                        color: #000;
                        font-size: 30rpx;
                        font-weight: 500;
                    }
                }

                .Info {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 10rpx;
                    .price {
                        display: flex;
                        align-items: center;
                    }
                    .Sold {
                        font-size: 20rpx;
                    }
                }
                .brokerage {
                    width: 100%;
                    height: 74rpx;
                    background: var(--back-color);
                    border: 1px solid var(--color);
                    border-radius: 10rpx;
                    margin-top: 18rpx;
                    display: flex;
                    align-items: center;
                    .brokerageBox {
                        flex: 1;
                        padding: 0 10rpx;
                        display: flex;
                        align-items: center;
                        color: var(--color);
                        font-size: 24rpx;
                        font-weight: 500;
                    }
                    .Share {
                        height: 100%;
                        background-color: var(--color);
                        color: #fff;
                        font-size: 30rpx;
                        display: flex;
                        align-items: center;
                        padding: 0 24rpx;
                    }
                }
                .userInfo {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-top: 14rpx;
                    .User {
                        flex: 1;
                        display: flex;
                        align-items: center;
                        .picture {
                            width: 50rpx;
                            height: 50rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                        }
                    }
                    .Store {
                        width: 70rpx;
                        height: 40rpx;
                        border: 1px solid var(--color);
                        font-size: 20rpx;
                        color: var(--color);
                        border-radius: 6rpx;
                        margin-left: 10rpx;
                        position: relative;
                        overflow: hidden;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
    }
</style>
